<div>
  <div class="vis-editor-agg-form-row">
    <div ng-if="agg.type.params.byName.order" class="form-group">
      <label for="visEditorOrderByOrder{{agg.id}}">Order</label>
      <select
        id="visEditorOrderByOrder{{agg.id}}"
        name="order"
        ng-model="agg.params.order"
        required
        ng-options="opt as opt.display for opt in aggParam.options"
        class="form-control">
      </select>
    </div>
    <div class="form-group">
      <label for="visEditorOrderBySize{{agg.id}}">Size</label>
      <input
        id="visEditorOrderBySize{{agg.id}}"
        name="size"
        ng-model="agg.params.size"
        required
        class="form-control"
        type="number"
        min="1"
      >
    </div>
  </div>
  <div class="vis-editor-agg-form-row">
    <div class="form-group">
      <label>
        <input type="checkbox"
               class="kuiCheckBox"
               name="showOther"
               ng-model="agg.params.otherBucket">
        Group other values in separate bucket
        <kbn-info info="Values not in the top N are grouped in this bucket.  To include documents with missing values, enable 'Show missing values'."></kbn-info>
      </label>
    </div>
  </div>
  <div class="vis-editor-agg-form-row" ng-if="agg.params.otherBucket">
    <div class="form-group">
      <label>
        Label for other bucket
      </label>
      <div>
        <input
          type="text"
          ng-model="agg.params.otherBucketLabel"
          class="form-control kuiSideBarInput"
        >
      </div>
    </div>
  </div>
  <div class="vis-editor-agg-form-row">
    <div class="form-group">
      <label>
        <input type="checkbox"
               class="kuiCheckBox"
               name="showMissing"
               ng-model="agg.params.missingBucket">
        Show missing values
        <kbn-info info="When enabled, include documents with missing values in the search.  If this bucket is in the top N, it appears in the chart.  If not in the top N, and you enable 'Group other values in separate bucket', Elasticsearch adds the missing values to the 'other' bucket."></kbn-info>
      </label>
    </div>
  </div>
  <div class="vis-editor-agg-form-row" ng-show="agg.params.missingBucket">
    <div class="form-group">
      <label>
        Label for missing values
      </label>
      <div>
        <input
          type="text"
          ng-model="agg.params.missingBucketLabel"
          class="form-control kuiSideBarInput"
        >
      </div>
    </div>
  </div>
</div>
